<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :editData="editData"
               :url="$api.game_getlist"
               :new_url="this.$api.game_insert"
               :detail_url="this.$api.game_info"
               :edit_url="this.$api.game_save"
               :is_default_edit="true"
               :pageConfig="pageConfig"></FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: 'game_name',
          label: '游戏标题',
          value: '',
          type: 'input'
        },
        {
          name: 'rights_name',
          label: '权益名称',
          value: '',
          type: 'input'
        },
        {
          name: "game_type_id",
          label: "游戏分类",
          value: '',
          type: 'select',
          groups: [
            {
              label: '所有',
              value: ''
            },
          ]
        },
        {
          name: "display",
          label: "是否显示",
          value: '',
          type: 'select',
          groups: [
            {
              label: '所有',
              value: ''
            },
            {
              label: '隐藏',
              value: '0'
            },
            {
              label: '显示',
              value: '1'
            },
          ]
        },
      ],
      columnData: [
        {
          prop: "game_id",
          label: "id"
        },
        {
          prop: "game_name",
          label: "游戏标题"
        },
        {
          prop: "game_icon",
          label: "游戏图标",
          custom:true,
          type:'icon'
        },
        {
          prop: "game_type_name",
          label: "游戏分类标题"
        },
        {
          prop: "rights_name",
          label: "所属权益"
        },
        {
          prop: "is_hot",
          label: "是否热门推荐",
          custom: true,
          type: 'switch',
          url: this.$api.game_hot
        },
        {
          prop: "is_search_hot",
          label: "是否热门搜索",
          custom: true,
          type: 'switch',
          url: this.$api.game_searchhot
        },
        {
          prop: "display",
          label: "是否显示",
          custom: true,
          type: 'switch',
          url: this.$api.game_status
        },
        {
          prop: "sort",
          label: "排序",
          custom: true,
          type: 'input',
          url: this.$api.game_sort
        },

        {
          prop: 'btn_group',
          label: '操作',
          custom: true,
          type: 'btn_group',
          width: '200px',
          group: [
            {
              name: '编辑',
              type: 'edit',
              color: 'primary',
              detail_mark: 'game_id',
            },
            {
              name: '删除',
              type: 'delete',
              color: 'danger',
              url: this.$api.game_status
            }
          ]
        }
      ],
      editData: [
        {
          name: 'game_id',
          label: '游戏分类id',
          value: '',
          type: 'input',
          display: 'none'
        },
        {
          name: 'game_name',
          label: '游戏名称',
          value: '',
          type: 'input',
          rules:[
            { required: true, message: "请输入游戏名称", trigger: "blur" },
            { max: 50, message: "最多输入50个字", trigger: "blur" },
          ]
        },
        {
          name: 'game_type_id',
          label: '游戏分类',
          value: '',
          type: 'select',
          groups:[],
          rules:[
            { required: true, message: "请选择游戏分类", trigger: "blur" },
          ]
        },
        {
          name: 'game_url',
          label: '游戏链接',
          value: '',
          type: 'input',
          rules:[
            { required: true, message: "请输入游戏链接", trigger: "blur" },
          ]
        },
        {
          name: 'game_type',
          label: '游戏类型',
          value: '',
          type: 'select',
          groups:[
            {
              label: '给包地址',
              value: '1'
            },
            {
              label: '外部链接',
              value: '2'
            },
          ],
          rules:[
            { required: true, message: "请选择游戏类型", trigger: "blur" },
          ]
        },
        {
          name: 'tips',
          label: '列表标签解释',
          value: '',
          type: 'input',
          rules:[
            { max: 50, message: "最多输入50个字", trigger: "blur" },
          ]
        },
        {
          name: 'version',
          label: '游戏版本号',
          value: '',
          type: 'input',
          rules:[
            { max: 30, message: "最多输入30个字", trigger: "blur" },
          ]
        },
        {
          name: 'size',
          label: '游戏大下',
          value: '',
          type: 'input',
          rules:[
            { max: 30, message: "最多输入30个字", trigger: "blur" },
          ]
        },
        {
          name: 'date_time',
          label: '游戏日期',
          value: '',
          type: 'date_picker',
          config:{
            format: 'yyyy-MM-dd',
            'value-format': 'yyyy-MM-dd',
          }
        },
        {
          name: 'small_title',
          label: '小标题',
          value: '',
          type: 'input',
          rules:[
            { max: 200, message: "最多输入200个字", trigger: "blur" },
          ]
        },
        {
          name: 'introduce',
          label: '介绍',
          value: '',
          type: 'editor',
          width:'100%'
        },
        {
          name: 'new_features',
          label: '新功能介绍',
          value: '',
          type: 'editor',
          width:'100%'
        },
        {
          name: 'category_name',
          label: '类别',
          value: '',
          type: 'input',
          rules:[
            { max: 50, message: "最多输入50个字", trigger: "blur" },
          ]
        },
        {
          name: 'language',
          label: '语言',
          value: '',
          type: 'input',
          rules:[
            { max: 50, message: "最多输入50个字", trigger: "blur" },
          ]
        },
        {
          name: 'system_require',
          label: '系统要求',
          value: '',
          type: 'input',
        },
        {
          name: 'developers',
          label: '开发商',
          value: '',
          type: 'input',
        },
        {
          name: 'download',
          label: '下载量',
          value: '',
          type: 'input',
        },
        {
          name: 'rights_id',
          label: '所属权益',
          value: '',
          type: 'select',
          groups:[],
          config:{
            filterable:true
          }
        },
        {
          name: "is_search_hot",
          label: "是否热门搜索",
          value: '',
          type: 'switch',
          config: {
            'active_value': '1',
            'inactive-value': '0'
          }
        },
        {
          name: "display",
          label: "是否显示",
          value: '',
          type: 'switch',
          config: {
            'active_value': '1',
            'inactive-value': '0'
          }
        },
        {
          name: 'sort',
          label: '排序',
          value: '',
          type: 'input',
        },
        {
          name: 'game_icon',
          label: '游戏图标',
          value: '',
          type: 'image_upload',
          width: '100%',
          config: {
            accept: ".jpg,.png,.bmp,.gif,.svg",
            fileList: []
            // is_icon:true
          },
          rules:[
            { required: true, message: "请添加游戏图标", trigger: "blur" },
          ]
        },
        {
          name: 'img_url',
          label: '游戏轮播图',
          value: '',
          type: 'image_upload',
          width: '100%',
          config: {
            limit: 1,
            accept: ".jpg,.png,.bmp,.gif,.svg",
            fileList: [],
            multiple:true,
            limit:5,
            // is_icon:true
          }
        },
      ],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
    this.getTopType();
  },
  methods: {
    getTopType(){
      // 获取游戏分类列表
      let req1 = this.$req.get(this.$api.game_type_getnopageList)
      // 获取权益列表
      let req2 = this.$req.get(`${this.$api.rights_getnopagelist}?is_free=1`)
      Promise.all([req1, req2]).then(values => {
        this.dataHandler(values[0].data, 2, 2, 'game_type_name', 'game_type_id');
        this.dataHandler(values[1].data, '', 17, 'name', 'rights_id');
      })
    },
    dataHandler (data, idx1, idx2, labelKey, valueKey) {
      for (var i in data) {
        if(typeof idx1 == 'number'){
          this.formData[idx1].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i]
          })
        }
        this.editData[idx2].groups.push({
          label: labelKey ? data[i][labelKey] : data[i],
          value: valueKey ? data[i][valueKey] : data[i],
        })
      }
    },
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>